var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    //建立webSocket通讯连接
    websocket = new WebSocket("ws://localhost:8080/websocket");
}
else {
    alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
    // setMessageInnerHTML("WebSocket连接发生错误");
    alert("通话出现问题，请稍后。。。。。");
};

//连接成功建立的回调方法
websocket.onopen = function () {
    var o = {
        message: "请问您有什么需要帮助的吗?"//这里是信息
    };
    setMessageInnerHTML(JSON.stringify(o));
}

//接收到消息的回调方法
websocket.onmessage = function (event) {
    setMessageInnerHTML(event.data);
}

//连接关闭的回调方法
websocket.onclose = function () {
    // setMessageInnerHTML("WebSocket连接关闭");
    // setMessageInnerHTML("聊天结束.....");
    alert("通话结束！");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
    closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
    // console.log("和后台交互获取的信息"+innerHTML);
    var obj = JSON.parse(innerHTML); //由JSON字符串转换为JSON对象
    answers(obj);
}
//关闭WebSocket连接
function closeWebSocket() {
    websocket.close();
}

function openWebSocket() {
    websocket.open();
}
/**
 * 发送方发送消息
 **/
function sendMessage(msg) {
    var o=addSendNode(msg);
    var message = JSON.stringify(o);//要返回的json字符串
    websocket.send(message);
}
/**
 * 接收方发送从后台返回的信息
 * @param obj
 */
function answers(obj) {
    var msg=obj.message;//获取接收到信息的主题
    addAcceptNode(msg);
}


/**
 * 按照解释需要更改下面的部分数据
 */


/**
 * 点击发送的按钮去发送信息。
 * 点击事件的ID可更改
 */
$("#sendMessage").click(function () {
    var msg=getTextareaText();
    sendMessage(msg);
});
/**
 * 获取需要发送的文本
 * 获取你的textarea中的内容。
 * @returns {*|jQuery}
 */
function getTextareaText() {
    var msg=$("#chatMessage").val();
    return msg;
}

/**
 * 在页面添加发送的节点
 * @param msg
 */
function addSendNode(msg) {
    var sendId=$(".guestId").attr("id");//获取自身账号的Id
    var s="<div class='content_left'>"+msg+"</div>";//添加到页面的节点、可根据你的页面进行修改
    $(".content").append(s);
    var acceptId=2;//这个ID是你获取的客服的Id，作为接收方；
    var o = {
        acceptId: acceptId,//这里是要接收的客服id
        sendId: sendId,//这是发送者的Id
        message: msg//这里是信息
    };
    return o;
}

/**
 * 在页面获取接收信息的html节点
 * @param msg
 */
function addAcceptNode(msg) {
    var s="<div class='content_right'>"+msg+"</div>";//回复的信息节点
    $(".content").append(s);
}